<template>
    <div class="header block">
        <div class="detail">
            <div class="search">
                <el-date-picker
                    v-model="payDateSolt"
                    type="daterange"
                    class="date-solt"
                    unlink-panels
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    @change="handleCurrentChange"
                    value-format="YYYY-MM-DD"
                />
                <input
                    type="text"
                    placeholder="请输入派遣单位/人员名称"
                    class="input search-input"
                    v-model="searchText"
                    @keydown.enter="search"
                />
                <button class="btn" @click="search">搜索</button>
                <button class="btn-white" @click="onReset">重置</button>
            </div>
        </div>
        <div class="operation">
<!--            <button class="btn" @click="onExport">-->
<!--                <i class="el-icon el-icon-upload2" />导出表格-->
<!--            </button>-->
            <export-button @export="onExport">导出表格</export-button>
            <button class="btn-green" @click="onOpenContract">
                <i class="el-icon el-icon-plus" />新建合同
            </button>
            <button class="btn-green" @click="onOpenContract">
                <i class="el-icon el-icon-folder-add" />打开电子签
            </button>
        </div>
    </div>
    <div class="container block">
        <div class="table">
            <el-table
                :data="tableData"
                style="width: 100%"
                :header-row-style="{ color: '#202536' }"
                :row-style="{ color: '#5E617D' }"
                @selection-change="handleSelectionChange"
            >
                <el-table-column type="selection" />
                <el-table-column
                    prop="companyName"
                    width="200"
                    label="公司名称"
                />
                <el-table-column
                    prop="templateName"
                    width="160"
                    label="合同名称"
                />
                <el-table-column prop="flowDescription" label="合同描述" />
                <el-table-column prop="userName" label="创建人" />
                <el-table-column
                    prop="effectiveTime"
                    label="合同有效期"
                    :formatter="
                        (item:{effectiveTime:string}) =>
                            item.effectiveTime ? item.effectiveTime + (item.unit === 1 ? '月' : item.unit === 2 ? '日' : '年') : ''
                    "
                />
                <el-table-column
                    prop="createTime"
                    width="200"
                    label="创建时间"
                />
                <el-table-column label="操作">
                    <template #default="scope">
                        <p
                            class="link"
                            @click="
                                () => {
                                    setYearId = scope.row.id
                                    yearSetNum = scope.row.effectiveTime
                                    unit = scope.row.unit
                                    radioUnit = scope.row.unit
                                }
                            "
                        >
                            编辑
                        </p>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                class="pagination"
                v-model:currentPage="pageNum"
                v-model:page-size="pageSize"
                :page-sizes="[10, 30, 50, 100]"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
            >
            </el-pagination>
        </div>
    </div>
    <alertBox
        data-title="编辑合同年限"
        v-if="setYearId"
        @close="setYearId = ''"
        width="500px"
    >
        <div class="contract-year-box">
            <div class="row year-row">
                <div class="text"><span class="important">*</span>年限类型</div>
                <el-radio-group v-model="radioUnit" @change="onRadioUnit" style="width: 240px">
                    <el-radio :label="2">按日</el-radio>
                    <el-radio :label="1">按月</el-radio>
                    <el-radio :label="0">按年</el-radio>
                </el-radio-group>
            </div>
            <div class="row year-row">
                <div class="text"><span class="important">*</span>合同年限</div>
                <el-input
                    type="number"
                    style="width: 240px"
                    class="textarea"
                    v-model="yearSetNum"
                >
                    <template #append>
                        {{ radioUnit === 1 ? '月' : radioUnit === 2 ? '日' : '年'}}
                    </template>
                </el-input>
            </div>
            <button class="btn mini-btn" @click="onYearSubmit">
                提交修改
            </button>
        </div>
    </alertBox>
</template>
<script lang="ts" setup>
import alertBox from '@/components/alert-box.vue'
</script>
<script lang="ts">
import axios from 'axios'
import { downLoadFile } from '../utils/util'
import { defineComponent } from 'vue'
import {
    getContractTempletes,
    ContractRecordDto,
    openContract,
    setContractYear
} from '@/api/contract'
import { exportContractRecord } from '@/api/export'
import store from '@/store/index'
import { number } from 'echarts'
export default defineComponent({
    name: 'ContractTemplate',
    data () {
        return {
            active: '全部',
            total: 0,
            pageSize: 10,
            pageNum: 1,
            tableData: [] as ContractRecordDto[],
            payDateSolt: '',
            searchValue: '',
            searchText: '',
            selects: [] as string[],
            yearSetNum: '' as '' | number,
            setYearId: '' as '' | number,
            radioUnit: 2, // 可被改变的
            unit: 0 // 存储的
        }
    },
    created () {
        this.handleCurrentChange()
    },
    methods: {
        // 编辑年份
        onRadioUnit () {

            // console.log(this.radioUnit, 'radioUnit')
        },
        handleCurrentChange () {
            getContractTempletes({
                pageSize: this.pageSize,
                pageNum: this.pageNum,
                searchText: this.searchValue,
                beginCreateTime: this.payDateSolt ? this.payDateSolt[0] : '',
                endCreateTime: this.payDateSolt ? this.payDateSolt[1] : ''
            }).then(res => {
                this.total = res.total
                this.tableData = res.list
            })
        },
        handleSizeChange () {
            this.pageNum = 1
            this.handleCurrentChange()
        },
        search () {
            this.searchValue = this.searchText
            this.pageNum = 1
            this.handleCurrentChange()
        },
        onReset () {
            this.searchText = ''
            this.payDateSolt = ''
            this.search()
        },
        async onExport () {
            const result = await exportContractRecord({
                ids: this.selects.join(','),
                searchText: this.searchValue
            }, {
                loading: true
            })
            if (!result.fileUrl && result.exportStatus === 0) {
                store.commit('getLongPollingFile', result)
            } else {
                // window.location.href = result.fileUrl
                // this.$message.success('导出成功！')
                axios({
                    url: result.fileUrl,
                    method: 'GET',
                    responseType: 'blob'
                }).then(async (response) => {
                    await downLoadFile(response, result.exportType, result.updateTime, result.remark)
                    await this.$message.success('导出成功！')
                })
            }
            // window.location.href =
            //     process.env.VUE_APP_BASE_URL +
            //         '/common/download?delete=true&fileName=' +
            //         result

            // this.$message.success('导出成功！')
        },
        handleSelectionChange (selects: { id: string }[]) {
            this.selects = selects.map(item => item.id)
        },
        async onOpenContract () {
            const result = await openContract()
            window.open(result.consoleUrl)
        },
        async onYearSubmit () {
            if (this.radioUnit === 0 && this.yearSetNum > 10) {
                this.$message.error('不可高于10年')
                return
            } else if (this.radioUnit === 2 && this.yearSetNum > 3650) {
                this.$message.error('不可高于3650天')
                return
            } else if (this.radioUnit === 1 && this.yearSetNum > 120) {
                this.$message.error('不可高于120个月')
                return
            }
            if (this.setYearId && this.yearSetNum) {
                await setContractYear({
                    unit: this.radioUnit,
                    id: this.setYearId,
                    effectiveTime: this.yearSetNum
                })
                this.setYearId = ''
                this.yearSetNum = ''
                this.handleCurrentChange()
                this.$message.success('修改成功！')
            } else {
                this.$message.error('请输入修改年限')
            }
        }
    }
})
</script>

<style lang="stylus" scoped>
table()
.header.block
    justify-content space-between
    display flex
    padding 10px 24px
.block
    padding: 10px 24px 0;
:deep().date-solt
    width 241px
    margin-right 20px
.operation
    .btn,.btn-green
        width 113px
        height 40px
        margin-left 20px

:deep().el-tabs__header.is-top
    display inline-block
:deep().el-tabs__nav-scroll
    padding-right 20px

.contract-year-box
    padding 0 30px
    flex-direction column
    justify-content center
    align-items center
    display flex
    .year-row
        width 340px
</style>
